<template>
  <t-dialog :header="`${row.project.projectName}-审批`" :visible.sync="visible" :onClose="closeDialog"
    :closeOnOverlayClick="false" :confirmBtn="null" mode="full-screen" top="5%">
    <div style="height: 80vh;">
      <template v-if="row.approveType === '1' || row.approveType === '8'">
        <item-detail v-if="row.project.version === '2024'" :reviewOpen="true" :hideInfo="hideInfo"
          :header="row.project.projectName" :objId="row.project.id"></item-detail>
        <project-detail-dialog v-else :reviewOpen="true" :hideInfo="hideInfo" :isDialog="false"
          :header="row.project.projectName" :objId="row.project.id"
          :visible.sync="dialog.open_project_detail"></project-detail-dialog>
      </template>
      <template v-else-if="row.approveType === '2'">
        <t-row>
          <t-col v-if="!closeDiff" :span="6">
            <t-tag size="large" variant="light" theme="primary">申报详情</t-tag>
            <project-detail-dialog :reviewOpen="true" :isDialog="false" :header="row.project.projectName"
              :objId="row.project.id" :visible.sync="dialog.open_project_detail"></project-detail-dialog>
          </t-col>
          <t-col :span="closeDiff ? 12 : 6">
            <t-tag size="large" variant="light" theme="primary">大纲详情</t-tag>
            <t-tag size="large" variant="light" style="margin-left: 10px" theme="danger">
              红色部分对应项目数据->大纲数据变化(目前只标注了基本信息、经费预算)
            </t-tag>
            <outline-detail-dialog :contrastOpen="true" :reviewOpen="true" :isDialog="false"
              :header="row.project.projectName" :objId="row.project.id"
              :visible.sync="dialog.open_outline_detail"></outline-detail-dialog>
          </t-col>
        </t-row>
      </template>
      <template v-else-if="row.approveType === '3'">
        <t-row v-if="row.project.version === '2024'">
          <t-col v-if="!closeDiff" :span="6">
            <t-tag size="large" variant="light" theme="primary">申报详情</t-tag>
            <item-detail :reviewOpen="true" :hideInfo="hideInfo" :header="row.project.projectName"
              :objId="row.project.id"></item-detail>
          </t-col>
          <t-col :span="closeDiff ? 12 : 6">
            <t-tag size="large" variant="light" theme="primary">任务书详情</t-tag>
            <t-tag size="large" variant="light" style="margin-left: 10px" theme="danger">
              红色部分对应申报数据->任务书数据变化(目前只标注了基本信息、经费预算)
            </t-tag>
            <contract-detail :contrastOpen="true" :reviewOpen="true" :isDialog="false" :header="row.project.projectName"
              :objId="row.project.id" :row="row" :visible.sync="dialog.open_contract_detail"></contract-detail>
          </t-col>
        </t-row>
        <t-row v-else>
          <t-col v-if="!closeDiff" :span="6">
            <t-tag size="large" variant="light" theme="primary">大纲详情</t-tag>
            <outline-detail-dialog :contrastOpen="false" :reviewOpen="true" :isDialog="false"
              :header="row.project.projectName" :objId="row.project.id"
              :visible.sync="dialog.open_outline_detail"></outline-detail-dialog>
          </t-col>
          <t-col :span="closeDiff ? 12 : 6">
            <t-tag size="large" variant="light" theme="primary">任务书详情</t-tag>
            <t-tag size="large" variant="light" style="margin-left: 10px" theme="danger">
              红色部分对应大纲数据->任务书数据变化(目前只标注了基本信息、经费预算)
            </t-tag>
            <contract-detail-dialog :contrastOpen="true" :reviewOpen="true" :isDialog="false"
              :header="row.project.projectName" :objId="row.project.id"
              :visible.sync="dialog.open_contract_detail"></contract-detail-dialog>
          </t-col>
        </t-row>
      </template>
      <template v-else-if="row.approveType === '4'">
        <performance-report-detail :obj-id="row.businessId" :project-id="row.project.id"></performance-report-detail>
      </template>
      <template v-else-if="row.approveType === '5'">
        <t-row>
          <t-col v-if="!closeDiff" :span="6">
            <t-tag size="large" variant="light" theme="primary">任务书详情<span style="color: red">(变更前)</span></t-tag>
            <contract-detail-dialog :contrastOpen="false" :reviewOpen="true" :isDialog="false"
              :header="row.project.projectName" :objId="row.project.id"
              :visible.sync="dialog.open_contract_detail"></contract-detail-dialog>
          </t-col>
          <t-col :span="closeDiff ? 12 : 6">
            <t-tag size="large" variant="light" theme="primary">变更内容<span style="color: red">(变更后)</span></t-tag>
            <change-apply-detail :obj-id="row.businessId" :reviewOpen="true"></change-apply-detail>
          </t-col>
        </t-row>
      </template>
      <acceptance-detail-dialog v-else-if="row.approveType === '6'" :isDialog="false" :header="row.project.projectName"
        :objId="row.project.id" :row="row" :onlyShowAssignFile="true"
        :visible.sync="dialog.open_acceptance_detail"></acceptance-detail-dialog>
      <acceptance-detail-dialog :reviewOpen="true" tab-default-value="2" v-else-if="row.approveType === '7'" :row="row"
        :isDialog="false" :header="row.project.projectName" :objId="row.project.id" :onlyShowAssignFile="true"
        :visible.sync="dialog.open_acceptance_detail"></acceptance-detail-dialog>

      <div v-else>待完善{{ row.approveType }}</div>
      <t-drawer :visible.sync="drawerVisible" showInAttachedElement :showOverlay="false"
        :size="isAdmin && formData.approveType === '1' ? '80%' : '37%'" :preventScrollThrough="false" header="审批内容">
        <t-form label-align="top" :disabled="!reviewOpen" ref="form" :data="formData" :rules="rules">
          <t-form-item v-if="isAdmin && formData.approveType === '1'" :show-error-message="false" label="形式审查审批意见">
            <t-table rowKey="id" :data="data" :columns="columns" hover :loading="dataLoading">
              <template #approveType="{ row }">
                {{ row.approveType | filterByDict(dict.type.approve_type) }}
              </template>
              <template #approveStatus="{ row }">
                <t-tag v-if="row.approveStatus" :theme="handleTheme(row.approveStatus, dict.type.approve_status)"
                  variant="light">
                  {{ row.approveStatus | filterByDict(dict.type.approve_status) }}
                </t-tag>
                <t-tag v-else theme="warning" variant="light">待审批
                </t-tag>
              </template>
            </t-table>
          </t-form-item>
          <t-form-item label="审批业务类型" name="approveType">
            <t-select disabled v-model="formData.approveType" clearable :options="dict.type.approve_type">
            </t-select>
          </t-form-item>
          <template v-if="site_tag === 'jtt' && isAttributeDept && row.project.version === '2024'">
            <t-form-item name="opinion" label="查重结论">
              <t-textarea :autosize="{ minRows: 8 }" v-model="formData.opinion" placeholder="请输入内容" />
            </t-form-item>
          </template>
          <template v-else>
            <t-form-item v-if="formData.approveStatus === '3'" label="审批意见">
              <template slot="label">
                审批意见 <t-link v-if="reviewOpen" @click="dialog.open_approval_opinions_list = true"
                  style="margin-left:10px" hover="color" theme="primary">选择常用审批意见</t-link>
              </template>
              <t-textarea :autosize="{ minRows: 8 }" v-model="formData.opinion" placeholder="请输入内容" />
            </t-form-item>
            <t-form-item v-else name="opinion" label="审批意见">
              <template slot="label">
                审批意见 <t-link v-if="reviewOpen" @click="dialog.open_approval_opinions_list = true"
                  style="margin-left:10px" hover="color" theme="primary">选择常用审批意见</t-link>
              </template>
              <t-textarea :autosize="{ minRows: 8 }" v-model="formData.opinion" placeholder="请输入内容" />
            </t-form-item>
          </template>
          <t-form-item
            v-if="row.approveType === '1' && site_tag === 'jt' && isAttributeDept && formData.approveStatus === '3'"
            label="集团各直属单位（即项目归口管理单位）申报材料书面审查意见(需盖公章)" name="fileIds">
            <file-upload @success="uploadSuccess" tips="限制pdf、图片" accept="application/pdf,image/*"
              v-model="formData.fileIds" moduleKey="projectSMSCYJ" :fileList="formData.fileLists" :multiple="true">
              <t-button :disabled="!reviewOpen" variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
          </t-form-item>
          <t-form-item label="审批结果" name="approveStatus">
            <t-radio-group v-model="formData.approveStatus">
              <t-radio value="3" label="通过"></t-radio>
              <t-radio value="4" label="退回"></t-radio>
            </t-radio-group>
          </t-form-item>
          <t-form-item
            v-if="row.approveType === '1' && site_tag === 'jtt' && isAttributeDept && formData.approveStatus === '3'"
            label="归口管理单位同意申报函" name="fileIdsByTechnical">
            <template slot="label">
              归口管理单位同意申报函<a style="margin-left:10px" class="t-button-link"
                :href="`${file_domain}/view/模板/归口管理单位同意申报函模板.pdf`" target="_blank">模板下载</a>
            </template>
            <file-upload @success="uploadSuccess" tips="限制pdf、图片" accept="application/pdf,image/*"
              v-model="formData.fileIdsByTechnical" moduleKey="projectGKTYSBH" :fileList="formData.fileListsByTechnical"
              :multiple="true">
              <t-button :disabled="!reviewOpen" variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
          </t-form-item>
          <t-form-item
            v-if="row.approveType === '1' && site_tag === 'jtt' && isAttributeDept && formData.approveStatus === '3' && isKeyProjects"
            label="立项审查情况的说明" name="fileIdsByProject">
            <file-upload @success="uploadSuccess" tips="限制pdf、图片" accept="application/pdf,image/*"
              v-model="formData.fileIdsByProject" moduleKey="projectLXSCQKDSM" :fileList="formData.fileListsByProject"
              :multiple="true">
              <t-button :disabled="!reviewOpen" variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
          </t-form-item>
          <t-form-item requiredMark v-if="openAccptanceNum && formData.approveStatus === '3'" label="验收编号"
            layout="inline">
            <t-form-item name="year">
              <t-input-adornment prepend="赣交科验字[" append="]"><t-date-picker mode="year" clearable
                  v-model="formData.year">
                  <template #suffixIcon></template>
                </t-date-picker>
              </t-input-adornment>
            </t-form-item>
            <t-form-item name="num">
              <t-input-adornment prepend="第" append="号">
                <t-input-number clearable theme="normal" :allowInputOverLimit="false" v-model='formData.num'
                  :min="0"></t-input-number>
              </t-input-adornment>
            </t-form-item>
            <t-button @click="dialog.header = '验收编号列表'; dialog.open_acceptance_num_list = true" variant="text"
              class="t-button-link">
              <t-icon name="info-circle" slot="icon" />
              历史验收编号
            </t-button>
          </t-form-item>
        </t-form>
        <template #footer>
          <t-button theme="default" @click="closeDrawer">关闭审批界面</t-button>
          <t-button theme="default" variant="outline" @click="drawerApproveVisible = true">审批记录</t-button>
          <t-button v-if="reviewOpen" theme="primary" @click="onSubmit(1)">暂存</t-button>
          <t-button v-if="reviewOpen" theme="primary" @click="onSubmit(2)">提交审批</t-button>
        </template>
      </t-drawer>

      <t-drawer :visible.sync="drawerApproveVisible" showInAttachedElement :showOverlay="false" size="80%"
        :preventScrollThrough="false" header="审批记录">
        <approve-list v-if="drawerApproveVisible" :row="row" :isDialog="false" :objId="row.project.id"></approve-list>
        <template #footer>
          <t-button theme="default" @click="drawerApproveVisible = false">关闭审批记录</t-button>
        </template>
      </t-drawer>

      <t-drawer :visible.sync="drawerTerminateVisible" showInAttachedElement :showOverlay="false" size="37%"
        :preventScrollThrough="false" header="项目终止">
        <t-form label-align="top" :colon="true" :disabled="!reviewOpen" ref="form2" :data="formData2" :rules="rules2">
          <t-form-item name="opinion" label="终止意见">
            <t-textarea :autosize="{ minRows: 8 }" v-model="formData2.opinion" placeholder="请输入内容" />
          </t-form-item>
        </t-form>
        <template #footer>
          <t-button theme="default" @click="drawerTerminateVisible = false">关闭项目终止界面</t-button>
          <t-button theme="default" variant="outline" @click="drawerApproveVisible = true">审批记录</t-button>
          <t-button v-if="reviewOpen" theme="primary" @click="onSubmit2()">确认</t-button>
        </template>
      </t-drawer>
      <acceptance-num-list :year="formData.year" v-if="dialog.open_acceptance_num_list"
        :visible.sync="dialog.open_acceptance_num_list"></acceptance-num-list>
    </div>

    <template #footer>
      <t-button theme="default" @click="closeDialog">取消</t-button>
      <t-button v-if="['2', '3'].includes(row.approveType)" theme="warning" @click="closeDiff = !closeDiff">
        {{ closeDiff ? '打开阶段对比' : '关闭阶段对比' }}
      </t-button>
      <t-button theme="default" variant="outline" @click="drawerApproveVisible = true">审批记录</t-button>
      <t-button theme="danger"
        v-if="($store.state.user.roles.includes('kjcspy') || $store.state.user.roles.includes('admin')) && reviewOpen"
        @click="drawerTerminateVisible = true">打开项目终止界面
      </t-button>
      <t-button theme="primary" @click="drawerVisible = true">打开审批界面</t-button>
    </template>
    <approval-opinions-list-dialog v-if="dialog.open_approval_opinions_list"
      :visible.sync="dialog.open_approval_opinions_list"
      @selectContent="formData.opinion = $event"></approval-opinions-list-dialog>
  </t-dialog>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import OutlineDetailDialog from "../../outline/components/outline-detail-dialog.vue";
import ContractDetailDialog from "../../contract/components/contract-detail-dialog.vue";
import ContractDetail from "../../contract/components/contract-detail.vue";
import ProjectDetailDialog from "../../pm/components/project-detail-dialog.vue";
import AcceptanceDetailDialog from "../../acceptance/components/acceptance-detail-dialog.vue";
import ApproveList from "./approve-list.vue";
import ChangeApplyDetail from "../../implement/components/change-apply-detail.vue";
import performanceReportDetail from "../../implement/components/performance-report-detail.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { getFiles } from "@/api/common";
import acceptanceNumList from "../../acceptance/components/acceptance-num-list.vue";
import ItemDetail from "../../pm/components/item-detail.vue";
import ApprovalOpinionsListDialog from "@/pages/components/approval-opinions-list-dialog.vue"

export default {
  name: "approve-info",
  components: {
    OutlineDetailDialog,
    ContractDetailDialog,
    ProjectDetailDialog,
    ApproveList,
    AcceptanceDetailDialog,
    ChangeApplyDetail,
    performanceReportDetail,
    FileUpload,
    acceptanceNumList,
    ItemDetail,
    ContractDetail,
    ApprovalOpinionsListDialog
  },
  props: {
    row: Object,
    reviewOpen: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isAttributeDept: false,
      isKeyProjects: false,
      closeDiff: false,
      isAdmin: false,
      openAccptanceNum: false,
      hideInfo: this.$store.state.user.roles.includes("xssc"),
      drawerVisible: false,
      drawerApproveVisible: false,
      drawerTerminateVisible: false,
      dialog: {
        open_project_detail: false,
        open_outline_detail: false,
        open_contract_detail: false,
        open_acceptance_detail: false,
        open_acceptance_num_list: false,
        open_approval_opinions_list: false,
        objId: 0
      },
      formData: {
        id: this.row.id,
        businessId: this.row.businessId,
        approveType: this.row.approveType,
        opinion: '',
        approveStatus: "3",
        fileIds: [],
        fileLists: [],
        fileIdsByTechnical: [],
        fileListsByTechnical: [],
        fileIdsByProject: [],
        fileListsByProject: [],
        year: '',
        num: '',
        zan: '0',
      },
      rules: {
        opinion: [
          { required: true, message: "不能为空" }
        ],
        approveStatus: [
          { required: true, message: "审批结果不能为空" }
        ],
        fileIds: [
          { required: true, validator: (val) => val && val.length, message: `申报材料书面审查意见不能为空`, type: "error" }
        ],
        fileIdsByTechnical: [
          { required: true, validator: (val) => val && val.length, message: `归口管理单位同意申报函不能为空`, type: "error" }
        ],
        fileIdsByProject: [
          { required: true, validator: (val) => val && val.length, message: `立项审查情况的说明不能为空`, type: "error" }

        ],
        year: [
          { required: true, message: "年份不能为空" }
        ],
        num: [
          { required: true, message: "第几号不能为空" }
        ],
      },
      formData2: {
        id: this.row.project.id,
        opinion: ''
      },
      rules2: {
        opinion: [
          { required: true, message: "终止意见不能为空" }
        ],
      },
      visible: true,
      value: "first",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        approveType: '',
        businessName: '',
      },
      data: [],
      columns: [
        // {
        //   colKey: "businessId",
        //   title: "业务id",
        //   align: "center"
        // },
        {
          colKey: "businessName",
          title: "业务名称",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "approveType",
          title: "审批业务类型",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "approverName",
          title: "审批人",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "deptName",
          title: "单位",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "opinion",
          title: "审批意见",
          align: "center",
          width: 300
        },
        {
          colKey: "approveStatus",
          title: "审批结果",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "createTime",
          title: "审批时间",
          align: "center",
          ellipsis: true
        },
      ],

      dataLoading: false,
    }
  },
  computed: {},
  dicts: ['approve_status', 'approve_type', "approve_type"],
  async created () {
    console.log(this.row, '---------');

    if (this.$store.state.user.roles.includes("kjcspy") || this.$store.state.user.permissions.includes("*:*:*")) {
      this.isAdmin = true;
      this.getApproveList();
      // 审批验收意见书
      if (this.row.approveType === '7') {
        this.openAccptanceNum = true;
        this.$api.kjxm.acceptance.getIdeaNumBy(this.row.project.id).then(response => {
          this.formData.year = response.data.year.toString();
          this.formData.num = response.data.num;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    }
    this.row.approveStatus = this.row.approveStatus || '3';
    this.isKeyProjects = false
    Object.assign(this.formData, this.row);
    // 判断是否归口管理单位管理员账号
    try {
      const response = await this.$api.system.dept.isAttributeDept()
      this.isAttributeDept = !!response.data;
      if (this.isAttributeDept && this.row.approveType === '1') {
        getFiles(this.row.project.id).then((res) => {
          const files = {}
          res.data.forEach((item) => {
            if (!files[item.moduleKey]) {
              files[item.moduleKey] = []
            }
            files[item.moduleKey].push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath
            })
          })
          if (this.site_tag === 'jt') {
            this.formData.fileLists = files.projectSMSCYJ || [];
            this.formData.fileIds = files.projectSMSCYJ?.map(val => val.id) || [];
          }
          if (this.site_tag === 'jtt') {
            this.formData.fileListsByTechnical = files.projectGKTYSBH || [];
            this.formData.fileIdsByTechnical = files.projectGKTYSBH?.map(val => val.id) || [];
            this.$api.kjxm.project.getNewAll(this.row.project.id).then(resNewAll => {
              if ([1660720633654].includes(resNewAll.data.projectCategory)) {
                this.isKeyProjects = true
                this.formData.fileListsByProject = files.projectLXSCQKDSM || [];
                this.formData.fileIdsByProject = files.projectLXSCQKDSM?.map(val => val.id) || [];
              }
            })
          }
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    } catch (e) {
      this.$message.error(e.toString());
    }
    // 如果是集团立项审批且为归口管理单位管理员账号则上传审批文件
    if (this.row.approveType === '1' && this.site_tag !== 'jt') {
      if (this.site_tag === 'jtt' && this.isAttributeDept && this.row.project.version === '2024' && this.formData.opinion === "") {
        this.formData.opinion = "经过仔细查重与审批，本课题在立项依据、研究内容、目标以及拟解决的关键科学问题和研究方案中未发现重复内容。";
      }
    }

  },
  methods: {
    getApproveList () {
      this.dataLoading = true;
      this.$api.kjxm.approve.getXsscByBusinessId(this.row.project.id).then(response => {
        this.data = response.data;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog () {
      this.$emit("update:visible", false);
    },
    closeDrawer () {
      this.drawerVisible = false
    },
    onSubmit (type) {
      if (type === 1) {
        this.formData.zan = '1';
        this.$api.kjxm.approve.opApprove(this.formData).then(response => {
          this.$message.success('暂存成功');
          this.$emit("reload");
          this.$emit("update:visible", false);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      } else {
        this.formData.zan = '0';
        this.$refs.form.validate().then((validateResult) => {
          if (validateResult === true) {
            let loading = false;
            const confirmDia = this.$dialog.confirm({
              header: "审批提示",
              body: `是否确认提交？`,
              confirmBtn: {
                content: loading ? '提交中...' : '提交',
                theme: 'primary',
                loading,
              },
              theme: "warning",
              onConfirm: ({ e }) => {
                if (this.formData.approveStatus === "3" && !this.formData.opinion) {
                  this.formData.opinion = "通过"
                }
                this.formData.kjc = this.row.kjc;
                loading = true
                confirmDia.update({
                  confirmBtn: {
                    loading: true,
                  },
                })
                this.$api.kjxm.approve.opApprove(this.formData).then(response => {
                  this.$message.success('提交成功');
                  this.$emit("reload");
                  this.$emit("update:visible", false);
                  confirmDia.destroy();
                  loading = false
                }).catch((e) => {
                  loading = false
                  confirmDia.update({
                    confirmBtn: {
                      loading: false,
                    },
                  })
                  this.$message.error(e.toString());
                });
              },
            })

          } else {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            this.$message.error(firstError);
          }
        })
      }

    },
    onSubmit2 () {
      this.$refs.form2.validate().then((validateResult) => {
        if (validateResult === true) {
          let loading = false;
          const confirmDia = this.$dialog.confirm({
            header: "系统提示",
            body: `是否确认终止项目名称为"${this.row.project.projectName}"的数据项？`,
            theme: "danger",
            confirmBtn: {
              content: loading ? '提交中...' : '确认',
              theme: 'primary',
              loading
            },
            onConfirm: ({ e }) => {
              loading = true;
              confirmDia.update({
                confirmBtn: {
                  loading: true,
                },
              })
              this.$api.kjxm.project.terminate(this.formData2).then(() => {
                this.$message.success("终止成功");
                loading = false;
                confirmDia.destroy();
                this.$emit("reload");
                this.$emit("update:visible", false);
              }).catch((e) => {
                loading = false;
                confirmDia.update({
                  confirmBtn: {
                    loading: false,
                  },
                })
                this.$message.error(e.toString());
              });
            }
          });
        } else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      });
    },
    uploadSuccess (ids) {
      this.$api.kjxm.project.edit({
        id: this.row.project.id,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

//.t-form__item {
//  margin-bottom: 6px
//}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}

::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
}

/deep/ .t-drawer .t-drawer__content-wrapper {
  height: calc(100% - var(--td-comp-size-xxxl));
  margin-top: var(--td-comp-size-xxxl);
}

/deep/ .t-drawer__header {
  display: none;
}
</style>
